<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>消息列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<style type="text/css">
			.mui-table-view-cell {
				position: relative;
				margin: 15px 0;
				padding: 0 !important;
			}
			
			#list {
				padding: 5px 10px;
			}
			
			.type {
				margin-right: 10px;
				font-size: 16px;
				color: #666;
			}
			
			.newsType h5 {
				margin: 15px 0;
				font-size: 16px;
			}
			
			.newsType p,
			.newsType h5 {
				padding-left: 25px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			
			.notice:before {
				display: inline-block;
				width: 20px;
				height: 20px;
				content: "公";
				font-size: 12px;
				text-align: center;
				line-height: 20px;
				background-color: #00BFFF;
				color: #FFF;
			}
			
			.inform:before {
				display: inline-block;
				width: 20px;
				height: 20px;
				content: "通";
				font-size: 12px;
				text-align: center;
				line-height: 20px;
				background-color: #DCA7A7;
				color: #FFF;
			}
			
			.remind:before {
				display: inline-block;
				width: 20px;
				height: 20px;
				content: "醒";
				font-size: 12px;
				text-align: center;
				line-height: 20px;
				background-color: #00D449;
				color: #FFF;
			}
			
			.time {
				color: #999;
			}
			/*阅读状态*/
			
			.isView {
				width: 15px;
				height: 15px;
				background-color: #FF8D00;
				border: 1px solid #FF8D00;
				border-radius: 7.5px;
				position: absolute;
				right: 5px;
				top: 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">消息中心</h1>
		</header>
		<!--下拉刷新容器-->
		<div class="mui-content">
			<div id="pullrefresh">
				<ul class="mui-table-view mui-table-view-chevron" id="list">
					<!--<li class="mui-table-view-cell" data-id="1">
						<div class="notice newsType">
							<span class="type">公告</span>
							<span class="time">测试测试</span>
							<h4>订单到期提醒订单到期提醒订单到期提醒</h4>
							<p>测试测试订单到期提醒订单到期提醒订单到期提醒</p>
						</div>
					</li>-->
					<script type="text/html" id="model">
						{{if status=="success"}} {{each data as value i}} {{if value.category_name_En=="gonggao"}}
						<li class="mui-table-view-cell" data-id="{{value.id}}">
							<div class="notice newsType">
								<span class="type">公告</span>
								<span class="time">{{value.updated_at}}</span>
								<h5>{{value.title}}</h5>
								<p>{{value.content}}</p>
							</div>
							{{if value.isView==true}}
							<span class="isView"></span> {{/if}}
						</li>
						{{else if value.category_name_En=="tongzhi"}}
						<li class="mui-table-view-cell" data-id="{{value.id}}">
							<div class="inform newsType">
								<span class="type">通知</span>
								<span class="time">{{value.updated_at}}</span>
								<h5>{{value.title}}</h5>
								<p>{{value.content}}</p>
							</div>
							{{if value.isView==true}}
							<span class="isView"></span> {{/if}}
						</li>
						{{else if value.category_name_En=="tixing"}}
						<li class="mui-table-view-cell" data-id='{{value.id}}' data-type="tixing">
							<div class="remind newsType">
								<span class="type">提醒</span>
								<span class="time">{{value.updated_at}}</span>
								<h5>{{value.title}}</h5>
								<p>{{value.content}}</p>
							</div>
							{{if value.isView==true}}
							<span class="isView"></span> {{/if}}
						</li>
						{{/if}} {{/each}} {{/if}}
					</script>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			})
			var count = 1; //页码
			var page_number = 8; //每页的数据数
			//上拉数据渲染
			function pullupRefresh() {
				require(weburl + newsList, "json", "post", {
					token: localStorage.getItem("token"),
					offset: count++,
					limit: page_number
				}, function(response) {
					console.log(JSON.stringify(response));
					if(response.status == "error") {
						//参数为true代表没有更多数据了。
						mui('#pullrefresh').pullRefresh().endPullup(true);
						mui.toast(response.msg, {
							duration: 'long',
							type: 'div'
						})
						return false;
					}
					if(response.data.length < 10) {
						mui('#pullrefresh').pullRefresh().endPullup(true);
						upAddData(response);
						return false;
					}
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().endPullup(false); //参数为true代表没有更多数据了。
						upAddData(response);
					}, 1500);
				}, function() {
					mui.toast('网络错误', {
						duration: 'long',
						type: 'div'
					})
					mui('#pullrefresh').pullRefresh().endPullup(true);
				})
			}
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				count = 1;
				require(weburl + newsList, "json", "post", {
					token: localStorage.getItem("token"),
					offset: count,
					limit: page_number
				}, function(response) {
					if(response.status == "success") {
						setTimeout(function() {
							downData(response);
						}, 1500);
						mui('#pullrefresh').pullRefresh().endPulldown();
						
						return false;
					}
					downData(response);
					mui.toast(response.msg, {
						duration: 'long',
						type: 'div'
					});
					mui('#pullrefresh').pullRefresh().endPulldown();
					// 重置上拉加载
					mui('#pullrefresh').pullRefresh().refresh(true);
				}, function() {
					mui.toast("网络错误", {
						duration: 'long',
						type: 'div'
					})
					mui('#pullrefresh').pullRefresh().endPulldown();
				})
			}

			//数据渲染
			//上拉数据渲染
			function upAddData(resData) {
				console.log(JSON.stringify(resData));
				var str = template("model", resData);
				$("#list").append(str);
			}
			//下拉数据渲染
			function downData(resData) {
				// 暂无数据的时候
				if(resData.code == "10002") {
					str = '';
					$("#list").html(str);
					return false;
				}
				console.log(JSON.stringify(resData));
				var str = template("model", resData);
				$("#list").html(str);
				
			}
			//点击列表
			mui('body').on("tap", ".mui-table-view-cell", function() {
				var that = $(this);
				//判断是否已经阅读，如果已经阅读就跳转
				require(weburl + newsStatus, "json", "post", {
					token: localStorage.getItem("token"),
					id: that.attr("data-id")
				}, function(response) {
					console.log(JSON.stringify(response));
					if(response.status == "success") {
						that.children(".isView").css("display", "none");
						if(that.attr("data-type") == "tixing") {
							mui.openWindow({
								url: "waitCheckOut.html",
								id: "waitCheckOut.html",
								extras: {
									pay_status: 1
								}
							}); 
							return false;
						}
						mui.openWindow({
							url: "newDetail.html",
							id: "newDetail.html",
							extras: {
								art_id: that.attr("data-id")
							}
						})
						return false;
					}
					mui.toast("网络错误,请稍后再试", {
						duration: 'long',
						type: 'div'
					})
				}, function() {
					mui.toast("网络错误,请稍后再试", {
						duration: 'long',
						type: 'div'
					})
					return false;
				});

			})
		</script>
	</body>

</html>